//标题右侧购物车图标按钮
<template>
  <router-link to="/cart" class="cart-icon" v-if="cartIconShow">
    <span class="cart"> 购物车({{ totalMount }}) </span>
  </router-link>
</template>

<script>
import { mapState } from "vuex";

import { setStorage } from "../../utils/tools";

export default {
  name: "CartIcon",
  props: {
    cartIconShow: Boolean,
  },
  computed: {
    ...mapState(["totalMount", "totalPrice", "cartData"]),
  },
  updated() {
    //在购物车图标组件更新的时候
    //将修改完的state同步localStorage(除了phoneData)
    setStorage({
      totalMount: this.totalMount,
      totalPrice: this.totalPrice,
      cartData: this.cartData,
    });
  },
};
</script>

<style lang="scss" scoped>
.cart-icon {
  color: #fff;

  .cart {
    position: absolute;
    right: 0.15rem;
    top: 0.15rem;
    font-size: 0.14rem;
  }
}
</style>